<template>
  <div class="bigbox">
    <!-- 登录页面 -->
    <div class="login" ref="loginRef">
      <h3>欢迎登陆</h3>
      <div class="formbox">
        <el-form :model="user" label-width="100px" size="large" :rules="ruleslogin" ref="loginFormRef"
          label-position="left">
          <el-form-item label="账号:" prop="username">
            <el-input v-model="user.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="user.password" type="password" placeholder="请输入密码" show-password />
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="user.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="验证码:" prop="code">
            <el-input v-model="user.code" placeholder="请输入验证码">
              <template #append>
                <button class="button" @click.prevent="getcode">获取验证码</button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <section class="tabbox">
              <u @click="handletabreg" class="leftbox">立即注册</u>
              <button class="loginbtn" @click.prevent="handlelogin">登录</button>
            </section>
          </el-form-item>
        </el-form>
        <div class="rememberpasaword">
          <input type="checkbox" name="" id="" v-model="rememb"><span>记住密码</span>
        </div>
      </div>
    </div>
    <!-- 注册页面 -->
    <div class="regbox" ref="regRef" style="display: none;">
      <h3>欢迎注册</h3>
      <div class="regformbox">
        <el-form :model="newuser" label-width="100px" size="large" label-position="left" :rules="rulesreg"
          ref="regformRef">
          <el-form-item label="账号:" prop="newusername">
            <el-input v-model="newuser.newusername" placeholder="请设置账号" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="昵称:" prop="newnickname">
            <el-input v-model="newuser.newnickname" placeholder="请设置昵称" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="密码:" prop="newpassword">
            <el-input v-model="newuser.newpassword" type="password" placeholder="请设置密码" style="width: 250px;"
              show-password />
          </el-form-item>
          <el-form-item label="确认密码:" prop="newrpassword">
            <el-input v-model="newuser.newrpassword" type="password" placeholder="请确认密码" style="width: 250px;"
              show-password />
          </el-form-item>
          <el-form-item>
            <section class="tabbox">
              <span class="leftbox1">已有账号？去<u @click="handletablogin"> 登陆</u></span>
              <button class="regbtn" id="regbtn" @click.prevent="handlelreg">注册</button>
            </section>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- swiper -->
    <div class="swiperbox">
      <el-carousel :interval="3000" type="card"  >
        <el-carousel-item v-for="item in imgs" :key="item">
          <h3 text="2xl" justify="center"><img :src="item" alt=""></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script  lang="ts" >
import { ElMessage } from 'element-plus'
import { defineComponent } from 'vue'



export default defineComponent({
  name: '',
  data() {
    return {
      user: {
        username: '',
        password: '',
        code: '',
        phone: '',
      },
      newuser: {
        newusername: '',
        newnickname: '',
        newpassword: '',
        newrpassword: '',
      },
      imgs: [
        '/images/swiper1.png',
        '/images/swiper2.png',
        '/images/swiper3.png',
        '/images/swiper4.png',
        '/images/swiper5.png',
        '/images/swiper6.png',
        '/images/swiper7.png',
      ],
      rememb:false,
    }
  },
  created(){
    if(localStorage.getItem('username')){
      // @ts-ignore
      this.user.username = localStorage.getItem('username')
      // @ts-ignore
      this.user.password = localStorage.getItem('password')
      // @ts-ignore
      this.rememb = localStorage.getItem('rememb')
    }
  },
  computed: {
    rulesreg() {
      return {
        newusername: [
          { required: true, message: '请输入账号！', trigger: 'blur' },
          { min: 5, max: 12, message: '账号应为5-12位', trigger: 'blur' },
        ],
        newpassword: [
          { required: true, message: '请输入密码！', trigger: 'blur' },
          { min: 5, max: 8, message: '账号应为5-8位', trigger: 'blur' },
        ],
        newnickname: [
          { required: true, message: '请设置昵称！', trigger: 'blur' },
          { min: 2, max: 5, message: '账号应为2-5位', trigger: 'blur' },
        ],
        newrpassword: [
          { required: true, message: '请确认密码！', trigger: 'blur' },
          { min: 5, max: 8, message: '确认密码请与密码一致！', trigger: 'blur' },
        ],
      }
    },
    ruleslogin() {
      return {
        username: [
          { required: true, message: '请输入账号！', trigger: 'blur' },
          { min: 5, max: 12, message: '账号应为5-12位', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'blur' },
          { min: 5, max: 8, message: '账号应为5-8位', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号！', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码！', trigger: 'blur' },
          { min: 6, max: 6, message: '验证码应为6位数字', trigger: 'blur' },
        ],
      }
    },
  },
  methods: {
    // 记住密码方法
    remembme(){
      if(!this.rememb) return
      localStorage.setItem('username',this.user.username)
      localStorage.setItem('password',this.user.password)
      // @ts-ignore
      localStorage.setItem('rememb',this.rememb)
    },
    // 登陆提交
    async handlelogin() {
      // @ts-ignore
      const res = await this.$refs.loginFormRef.validate(async (isValid) => {
        if (!isValid) return
        if (this.user.code !== '698773') {
          ElMessage.error('登录失败，验证码不正确！')
          return
        }
        //@ts-ignore
        const loginResult = await this.$store.dispatch('loginAction', this.user)
        if (loginResult) {
          // 登录成功，跳转页面
          // 调用记住密码方法
          this.remembme()
          ElMessage({
            message: '登录成功，请稍等...',
            type: 'success',
          })
          this.$router.push('/home')
        } else { // 失败
          ElMessage.error('登录失败，请检查账号密码是否正确！')
        }
      })
      if (!res) {
        ElMessage.error('登录失败！')
      }
    },
    // 注册提交
    async handlelreg() {
      // @ts-ignore
      const res = await this.$refs.regformRef.validate((isValid) => {
        if (!isValid) return
        if (this.newuser.newpassword !== this.newuser.newrpassword) {
          ElMessage.error('两次密码不一致，请确认后在输入！')
          return
        }
        // @ts-ignore
        const res = this.$store.commit('conserveNewuser', this.newuser)
        ElMessage({
          type: 'success',
          message: '注册成功',
        })
        this.handletablogin()
      })
      if (!res) {
        ElMessage.error('注册失败，用户名已存在或服务器异常！')
      }
    },
    // 切换注册页
    handletabreg() {
      console.log('dian')
      // @ts-ignore
      this.$refs.loginRef.style.display = 'none'
      // @ts-ignore
      this.$refs.regRef.style.display = 'flex'
    },
    // 切换登陆页
    handletablogin() {
      // @ts-ignore
      this.$refs.regRef.style.display = 'none'
      // @ts-ignore
      this.$refs.loginRef.style.display = 'flex'
    },
    // 获取验证码
    getcode() {
      const regexp = /^1[3-9]\d{9}$/
      if (regexp.test(this.user.phone)) {
        this.user.code = '698773'
        return
      } else {
        ElMessage.error('手机号格式不正确，获取验证码失败！')
      }

    },
  }
})
</script>

<style scoped lang="less">
// 大盒子图
.bigbox {

  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #ccc;
}

// 轮播背景
.swiperbox {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;

  .el-carousel {
    height: 100%;

    :deep(.el-carousel__container) {
      height: 100%;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  height: 100%;
  text-align: center;
  img{
    height: 100%;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


// 表单盒子
.login,
.regbox {
  width: 550px;
  height: 500px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;

  h3 {
    font-weight: 900;
    font-size: 30px;
    margin: 24px 0px 20px 20px;
  }

  // 表单
  .formbox,
  .regformbox {
    display: flex;
    justify-content: center;

    .el-form-item--large {
      margin: 30px 0;
    }

    .tabbox {
      display: flex;
      width: 100%;
      justify-content: space-between;

      u {
        color: blue;
        cursor: pointer;
      }

      .loginbtn,.regbtn {
        border: none;
        background-color: #60aeae;
        color: #fff;
        width: 70px;
        height: 40px;
        font-size: 20px;
        cursor: pointer;
      }
    }

  }

}


// 特殊自定义元素
.button {
  background: rgba(250, 250, 250, 0);
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
// 登录页面位置调整
.rememberpasaword{
  position: absolute;
  left: 167px;
  top: 396px;
  width: 80px;
  display: flex;
  justify-content: space-between;
}
.leftbox{
  position: relative;
  left: 311px;
  top: 67px;
}
.loginbtn{
  position: relative;
  left: -25px;
  top: 0px;
}
// 注册页面位置调整
.leftbox1{
  position: relative;
  left: 224px;
  top: 67px;
}
#regbtn{
  width: 150px;
  position: relative;
  left: -104px;
  top: 0px;
}
</style>
